<template>
    <div class="content-right">
      <div class="item">
          <div class="title">任务指派</div>
          <div class="content">
            <div class="box1">
              <div class="top">
                <span>100</span>件
              </div>
              <div class="down">今日发布数</div>
            </div>
            <div class="box1">
              <div class="top">
                <span>500</span>件
              </div>
              <div class="down">今日办结数</div>
            </div>
            <div class="box1">
              <div class="top">
                <span>90%</span>件
              </div>
              <div class="down">今日办结率</div>
            </div>
            <div class="box1">
              <div class="top active">
                <span>1000</span>件
              </div>
              <div class="down">全年发布总数</div>
            </div>
            <div class="box1">
              <div class="top active">
                <span>870</span>件
              </div>
              <div class="down">全年办结数</div>
            </div>
            <div class="box1">
              <div class="top active">
                <span>80%</span>件
              </div>
              <div class="down">全年办结率</div>
            </div>
            
          </div>
        
        </div>
        <div class="item2">
          <div class="title">事件信息</div>
          <div class="content" ref="echarts2">
            
            
          </div>
        
        </div>

        <div class="item3">
          <div class="title">重点工作推进</div>
          <div class="content" ref="echarts3">
            
            
          </div>
        
        </div>
      
        <!-- <img src="../assets/images/右侧@2x.png" alt=""></img> -->
      
    
    </div>
</template>
<script>
const echarts = require('echarts');

export default{
    name:'rightbox',
    data(){
        return{

        }
    },
    mounted(){
        this.initCharts2()
        this.initCharts3()
    },
    methods:{
        initCharts2 () {
        let myChart = echarts.init(this.$refs.echarts2);
        let option = {
          legend: {
              icon: 'circle',
              orient: 'horizontal',
              left: 'center',
              itemWidth: 12,
              itemHeight: 12,
              // formatter: ['{a|{name}}'].join('\n'),
              formatter:(params)=>{
                console.log('params',params)
                let str = '<div style="width:80px;height:30px;background:url(../assets/images/)"></div>'
                if(params == '今日上报'){
                  params += '：200件'
                }
                if(params == '今日办结'){
                  params += '：800件'
                }
                if(params == '办结率'){
                  params += '：80%'
                }
                return params
              },
              textStyle: {
                fontSize: 10,
                color: '#D6E1FF',
                height: 8,
                rich: {
                  a: {
                    verticalAlign: 'bottom',
                  },
                },
              },
              data: ['今日上报', '今日办结', '办结率'],
            },
            title:{
              show:true,//false
              text:"事件上报趋势图",//主标题文本
              textStyle:{
                  color:'#e4f2ff',//'red'，字体颜色
                  fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
                  fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
                  fontFamily:'sans-serif',//'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New' 
                  // 'Microsoft YaHei'(微软雅黑) ，文字字体
                  fontSize:12,//字体大小
                  lineHeight:12,//字体行高
              },
              
              // textAlign:'center',//整体（包括 text 和 subtext）的水平对齐
              textVerticalAlign:'middle',//整体（包括 text 和 subtext）的垂直对齐
              // padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
              left:'center',//'5' | '5%'，title 组件离容器左侧的距离
              // right:'auto',//'title 组件离容器右侧的距离
              top:'35',//title 组件离容器上侧的距离
              // bottom:'auto',//title 组件离容器下侧的距离
          },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#000000',
                borderWidth: 0,
                padding: [5, 10],
                textStyle: {
                    color: '#ffffff',
                },
            },
            grid: {
                  top: 60,
                  left: 30,
                  right: 20,
                  bottom: 20,
                  containLabel: false
            },
            toolbox: {
                show: false,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false, //坐标轴两边留白
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                
                axisLabel: {
                  interval:0,
                  textStyle: {
                      color: '#D6E1FF',
                  }
                },
                axisLine: {
                    lineStyle: {
                        color: '#9EA3B4',
                        opacity: 0.3,
                    }
                },
                axisTick: {
                        show: false,
                    },
            },
            yAxis: [
                {
                    type: 'value',
                    splitNumber: 5,
                    max:100,
                    splitLine: {
                        lineStyle: {
                            color: '#9EA3B4',
                            opacity: 0.3,
                            type:'dashed'
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#D6E1FF',
                        },
                    },
                },
            ],
            series: [
                {
                    type: 'line',
                    symbol: 'none',
                    smooth: true,
                    name:'今日办结',
                    itemStyle: {
                        normal: {
                            color: '#00fbd2',
                            lineStyle: {
                                color: '#00fbd2',
                                width: 2,
                            },
                            areaStyle: {
                                //区域填充样式
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(81, 169, 155, 0.1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(30, 237, 203, 0.4)',
                                    },
                                ]),
                            },
                        },
                    },
                    toolbox: {
                        show: false,
                    },
                    data: [48, 39, 50, 26, 32, 66, 32,48, 39, 50, 26, 32],
                },
                {
                    type: 'line',
                    symbol: 'none',
                    name:'办结率',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#f0fe33',
                            lineStyle: {
                                color: '#f0fe33',
                                width: 2,
                            },
                            areaStyle: {
                                //区域填充样式
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(119, 122, 80, 0.1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(152, 158, 77, 0.4)',
                                    },
                                ]),
                            },
                        },
                    },
                    toolbox: {
                        show: false,
                    },
                    data: [34, 51, 54, 60, 50, 60, 64,34, 51, 54, 60, 50],
                },
                {
                    type: 'line',
                    symbol: 'none',
                    name:'今日上报',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#1dbcf2',
                            lineStyle: {
                                color: '#1dbcf2',
                                width: 2,
                            },
                            areaStyle: {
                                //区域填充样式
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(85, 148, 169, 0.1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(68, 172, 207, 0.4)',
                                    },
                                ]),
                            },
                        },
                    },
                    toolbox: {
                        show: false,
                    },
                    data: [70, 60, 68, 42, 52, 60, 70,70, 60, 68, 42, 52],
                },
               
            ],
        };

        myChart.setOption(option)
      },
      initCharts3 () {
        let myChart = echarts.init(this.$refs.echarts3);
        // 绘制图表
       
        let chartData = {
          finishNum: [280, 510, 430, 403, 408, 150,280, 510, 430, 403, 408, 150],
          unFinishNum: [280, 510, 430, 403, 408, 150,280, 510, 430, 403, 408, 150],
          
        }
        let option = {
          
          color: ['#00bdff', '#ffba00'],
          tooltip: {
            confine: true,
          },
          grid: {
            left: '1%',
            right: '4%',
            bottom: '5%',
            top: '20%',
            containLabel: true,
          },
          legend: {
            icon: 'circle',
            orient: 'horizontal',
            left: 'center',
            itemWidth: 12,
            itemHeight: 12,
            formatter: ['{a|{name}}'].join('\n'),
            textStyle: {
              fontSize: 10,
              color: '#D6E1FF',
              height: 8,
              rich: {
                a: {
                  verticalAlign: 'bottom',
                },
              },
            },
            data: ['任务总数', '任务完成数'],
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.45)',
              },
            },
            axisLabel: {
              interval:0,
              fontSize: 12,
              color: '#D6E1FF',
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: [{
            type: 'value',
            min: 0,
            minInterval: 1,
            max:1000,
            splitArea: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.15)',
                // type: 'dashed', // dotted 虚线
              },
            },
            axisLabel: {
              fontSize: 12,
              color: '#D6E1FF',
              fontFamily: 'Bebas',
            },
          }, {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 12,
              formatter: '{value}%', // 右侧Y轴文字显示
              fontFamily: 'Bebas',
              color: '#6A93B9',
            },
            splitArea: {
              show: false,
            },
          }],
          series: [
          { 
            type: 'bar', 
            barWidth: 7, 
            itemStyle: { 
            barBorderRadius: [15, 15, 0, 0], }, 
            name: '任务总数', 
            data: chartData.finishNum 
          },
          { 
            type: 'bar', 
            barWidth: 7, 
            itemStyle: { barBorderRadius: [15, 15, 0, 0], }, 
            name: '任务完成数', 
            data: chartData.unFinishNum 
          },
          
          
          ],
        };

       
        
        myChart.setOption(option)
      },
    }
}
</script>
<style  scoped lang="scss">
.content-right{
    position: relative;
    float: right;
    margin-top: -100px ;
    .item,.item2,.item3{
      .title{
        font-size: 20px;
        color: #00ffc2;
        font-weight: bold;
      }
      .content{
        width: 430px;
        height: 270px;
        background: url("../assets/images/背景@2x.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 15px;
      }
    }
    .item2{
      .content{
        height: 260px;

      }
    }
    .item3{
      .content{
        height: 265px;

      }
    }
    .item{
      .content{
        display: flex;
        justify-content: space-between;

        flex-wrap: wrap;
        .box1{
          width: 31%;
          height: 110px;
          color: #eff0f3;
          font-size: 12px;
          .top{
            width: 100%;
            height: 90px;
            background:url('../assets/images/今日发布数@2x.png');
            background-size: 100% 100%;
            span{
              color: #29beff;
              font-size: 20px;
            }
            // .active{
            //   color: #ff5150;
            // }
          }
          .active{
            margin-top: 10px;
            background:url('../assets/images/全年发布总数@2x.png');
            background-size: 100% 100%;

            span{
              color: #ff5150;
            }
          }
        }
      }
    }
    
  }
</style>